<!-- scaleBox + flex布局 -->

<template>
	<scaleScreen class="scale-wrap">
		<div class="containerBox flex" :style="{ width: width + 'px', height: height + 'px', }">
			<div id="container" :style="{ height: height + 'px', width: width + 'px' }"></div>
			<div class="header flex gap-10 ">
				<div class="logo flex-2  flex ai-center jc-center fs-28">
					这是一个标题
				</div>
				<div class="nav flex  ai-center  flex-4 ">
					<div class="nav-item nav-item_active">模块一</div>
					<div class="nav-item">模块二</div>
					<div class="nav-item">模块三</div>
				</div>
				<div class="msg flex-1 flex ai-center jc-center p-r-10 p-l-20">
					<span class="fs-18">13:05:52</span>
					<span>admin</span>
					<span>
						<svg class="icon" aria-hidden="true">
							<use xlink:href="#icon-tuichu"></use>
						</svg>
					</span>
				</div>
			</div>
			<div class="left cover flex fd-column gap-10 ">
				<div class="title">
					<span class="tip"></span>
					<span>这是一个标题</span>
				</div>
				<div class="flex fd-column flex-1 gap-10">
					<div class="e-card flex-1">
						<radar1Chart />
					</div>
					<div class="e-card flex-1">
						<pie2Chart />
					</div>
				</div>
			</div>
			<div class="right cover flex fd-column gap-10">
				<div class="flex-1 flex fd-column gap-10">
					<div class="title">
						<span class="tip"></span>
						<span>这是一个标题</span>
					</div>
					<div class="e-card flex-1">
						<bar3Chart />
					</div>
				</div>
				<div class="flex-1 flex fd-column gap-10">
					<div class="title">
						<span class="tip"></span>
						<span>这是一个标题</span>
					</div>
					<div class="e-card flex-1">
						<line2Chart />
					</div>
				</div>
				<div class="flex-1 flex fd-column gap-10">
					<div class="title">
						<span class="tip"></span>
						<span>这是一个标题</span>
					</div>
					<div class="e-card flex-1">
						<bar1Chart />
					</div>
				</div>
			</div>
		</div>
	</scaleScreen>
</template>

<script>
import scaleScreen from "@/components/scaleScreen";

import line1Chart from "@/views/echart/lineChart/line1";
import line2Chart from "@/views/echart/lineChart/line2";
import bar1Chart from "@/views/echart/barChart/bar1";
import bar2Chart from "@/views/echart/barChart/bar2";
import bar3Chart from "@/views/echart/barChart/bar3";
import gauge1Chart from "@/views/echart/gaugeChart/gauge1";
import gauge2Chart from "@/views/echart/gaugeChart/gauge2";
import pie1Chart from "@/views/echart/PieChart/pie1";
import pie2Chart from "@/views/echart/PieChart/pie2";
import radar1Chart from "@/views/echart/radarChart/radar1";

export default {
	components: {
		scaleScreen,
		line1Chart,
		line2Chart,
		bar1Chart,
		bar2Chart,
		bar3Chart,
		gauge1Chart,
		gauge2Chart,
		pie1Chart,
		pie2Chart,
		radar1Chart,
	},
	data() {
		return {
			width: screen.width,
			height: screen.height,
			//实时屏幕高度
			windowHeight: document.documentElement.clientHeight,
		};
	},

	mounted() {
		// 当浏览器被重置大小时执行
		window.onresize = () => {
			return (() => {
				this.windowHeight = document.documentElement.clientHeight;
			})();
		};
		//调用地图初始化方法
		this.initAMap();
	},
	methods: {
		initAMap() {
			let map = new AMap.Map("container");
		},
	},
};
</script>

<style scoped lang="scss">
.e-card {
	// border: 2px solid;
	// border-image: linear-gradient(to right, #917667, #578aef) 1;
	background: #fff;
	border-radius: 5px;
}

.containerBox {
	--header-hight: 60px;
	height: 100%;
	width: 100%;

	.title {
		height: 50px;
		padding: 10px;
		background: #fff;
		box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);
		display: flex;
		align-items: center;
		border-radius: 5px;

		.tip {
			width: 0;
			height: 0;
			border: 10px solid transparent;
			border-left-color: #ffac4d;
			display: block;
		}
	}

	.header {
		height: var(--header-hight);
		position: absolute;
		width: 100%;

		.logo {
			background: #fff;
			height: 100%;
			box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);
			border-bottom-right-radius: 100px;
		}

		.nav {
			padding-left: 20px;

			.nav-item {
				background: #ffd29e;
				margin: 0 10px;
				padding: 10px 30px;
				border-radius: 30px 10px;
				transition: background-color 0.3s;

				&:hover,
				&_active {
					background: #ffac4d;
				}
			}
		}

		.msg {
			background: #fff;
			height: 50%;
			border-bottom-left-radius: 30px;
			box-shadow: 2px 2px 4px rgba(0, 21, 41, 0.08);

			&>span {
				margin: 0 10px;
			}
		}
	}

	.cover {
		position: absolute;
		width: 25%;
		height: calc(100% - var(--header-hight) - 40px);
		bottom: 20px;
	}

	.left {
		left: 10px;
	}

	.right {
		right: 10px;
	}
}
</style>
